<template>
  <div class="perData">
    <van-nav-bar
      title="个人资料"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="per-items">
      <div class="per-item">
        <div class="private-item">
          <van-cell title="头像"   is-link size="large" @click="pushHeadImgPage"> 
            <template #right-icon>
              <div class="private-item-img">
                <img src="@/assets/img/swiper/1.jpg">
                <!-- <span></span> -->
                <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
              </div>
            </template>
          </van-cell> 
          </div>
        <div class="private-item"><van-cell title="昵称" :value="nickName" is-link size="large" @click="pushNickNamePage"/></div>
        <div class="private-item"><van-cell title="性别"  :value="strGender" size="large"/></div>
        <div class="private-item"><van-cell title="地区" :value="position"  size="large" /></div>
      </div>
      <div class="per-item-second">
        <div class="private-item"><van-cell title="年龄"  :value="age" size="large"/></div>
        <div class="private-item"><van-cell title="职业"  value="学生" is-link size="large" @click="pushProfessionPage"/></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"personData",
  data(){
    return {
      // 昵称
      nickName:'',
      // 性别
      gender:'',
      // 地区
      position:'',
      // 年龄
      age:''
    }
  },
  computed:{
    strGender(){
      if(this.gender==2){
        return "男"
      }else {
        return "女"
      }
    },
  },
  created(){
    this.getPrivateInfo()
  },
  methods: {
    onClickLeft() {
      this.$router.push('/privateInfo')
    },
    // 获取相关个人信息
    getPrivateInfo(){
      this.gender  = this.$store.state.userInfo.gender
      this.age = this.$store.state.userInfo.age
      this.nickName = this.$store.state.userInfo.nick_name
      let pos1,pos2;
      pos1 = this.$store.state.userInfo.address.province;
      pos2 = this.$store.state.userInfo.address.city;
      this.position = pos1 + "-" + pos2;
    },
    pushHeadImgPage(){
      this.$router.push('/privateData/setImg');
    },
    pushProfessionPage(){
      this.$router.push('/privateData/profession')
    },
    pushNickNamePage(){
      this.$router.push('/privateData/nickname')
    },
    pushpositionPage(){
      this.$router.push('/privateData/position')
    }
  }
}
</script>

<style lang="less">
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }

  .per-items {
    margin-top: 15px;
  }
  .private-item-img {
    display: flex;
    align-items: center;
    height: 25px;
    width: 55px;
    img {
      width: 35px;
      height: 35px;
      border-radius: 20px 20px 20px 20px;
    }
    span {
      margin-left: 5px;
      font-size: 16px;
    }
  }
  .per-item-second {
    margin-top: 20px;
  }
</style>